<template>
  <div>
    <!--头部-->
    <Header></Header>
    <!--头部-->
  <!--轮播宣传广告区-->
  <div class="article">
        <!--展示轮播和新闻-->
        <el-row :gutter="20">
         <!--该16开的列，放置轮播图-->
          <el-col :span="16">
            <el-card>
              <template>
                <swiper class="swiper" :options="swiperOption">
                  <swiper-slide v-for="(item,index) in articles" :key="index">
                    <router-link :to="`/front/NewDetail/${item.id}`" target="_blank">
                      <img :src="item.titleImg" style="width: 100%" />
                    </router-link>
<!--                    <p class="swiper-title">{{item.title}}</p>-->
                  </swiper-slide>
                  <div class="swiper-pagination" slot="pagination"></div>
                </swiper>
              </template>
            </el-card>
          </el-col>
          <!--该16开的列，放置轮播图-->
          <!--该8开的列，放置就业咨询-->
          <el-col :span="8">
            <el-card>
              <RTab :channel-ids="[6,7,8,9]"></RTab>
            </el-card>
          </el-col>
          <!--该8开的列，放置就业咨询-->
        </el-row>
        <!--展示轮播和新闻-->
  </div>
  <!--轮播宣传广告区-->

  <!--新闻咨询区-->
  <div class="article">
    <el-row :gutter="20">
      <el-col :span="8">
        <RCard :channel-id="6"></RCard>
      </el-col>

      <el-col :span="8">
        <RCard :channel-id="7"></RCard>
      </el-col>

      <el-col :span="8">
        <el-card>
          <el-calendar v-model="value"></el-calendar>
        </el-card>
      </el-col>

    </el-row>
  </div>
   <!--新闻咨询区-->

  <!--广告图片区-->
 <div class="article">
        <img src="https://gxuwz-wnx.oss-cn-beijing.aliyuncs.com/jobManager/middle.jpg" width="1200px"/>
  </div>
  <!--广告图片区-->
  <!--新闻咨询区-->
    <div class="article">
      <el-row :gutter="20">
          <el-col :span="8">
            <RCard :channel-id="8"></RCard>
          </el-col>

          <el-col :span="8">
            <RCard :channel-id="9"></RCard>
          </el-col>

          <el-col :span="8">
            <RCard :channel-id="10"></RCard>
          </el-col>
        </el-row>
  </div>
  <!--新闻咨询区-->
  <!-- 宣讲会展示区-->
    <div class="article">
        <el-row :gutter="20">
               <el-carousel :interval="4000" type="card" height="200px">
                  <el-carousel-item v-for="item in 6" :key="item">
                    <el-card :body-style="{ padding: '0px' }">
                      <div style="padding: 14px;">
                        <el-descriptions title="宣讲会">
                          <el-descriptions-item label="地点">2021年秋季双选会</el-descriptions-item>
                          <el-descriptions-item label="主办方">梧州学院</el-descriptions-item>
                          <el-descriptions-item label="承办方">梧州学院学生就业管理工作处</el-descriptions-item>
                          <el-descriptions-item label="备注">
                            <el-tag size="small">学校</el-tag>
                            <el-tag size="small">就业</el-tag>
                            <el-tag size="small">毕业</el-tag>
                          </el-descriptions-item>
                          <el-descriptions-item label="联系地址">广西梧州富民路万秀区梧州学院</el-descriptions-item>
                        </el-descriptions>
                      </div>
                    </el-card>
                  </el-carousel-item>
              </el-carousel>

        </el-row>
      </div>
  <!-- 宣讲会展示区-->
    <Footer></Footer>
  </div>



</template>

<script>



import '../assets/css/styles.css'
import Header from "@/front/inc/Header";
import Footer from "@/front/inc/Footer";
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css'
import RCard from "@/front/inc/RCard";
import RTab from "@/front/inc/RTab";

export default {
  name: "Index2",
  components: {RTab, RCard, Footer, Header,Swiper,SwiperSlide},
  data() {
    return {
      activeName: 'first',
      value: new Date(),
      swiperOption: { //轮播图
        pagination: {
          el: '.swiper-pagination'
        }
      },
      articles:[ //轮播图数据
        {
          id:"1",
          titleImg:"https://gxuwz-wnx.oss-cn-beijing.aliyuncs.com/images/10/22/%E8%BD%AE%E6%92%AD%E5%9B%BE001.jpg",
          title:"我校组织2021届重点群体毕业生到桂林 参加精准帮扶双选会"
        },
        {
          id:"2",
          titleImg:"https://gxuwz-wnx.oss-cn-beijing.aliyuncs.com/images/10/22/%E8%BD%AE%E6%92%AD%E5%9B%BE002.jpg",
          title:"我校学工队伍赴藤县陶瓷产业园区考察  就业市场"
        },
        {
          id:"3",
          titleImg:"https://gxuwz-wnx.oss-cn-beijing.aliyuncs.com/images/10/22/%E8%BD%AE%E6%92%AD%E5%9B%BE003.jpg",
          title:"我校举办2020年大学生职业生涯规划大赛"
        },
        {
           id:"4",
           titleImg: "https://gxuwz-wnx.oss-cn-beijing.aliyuncs.com/images/10/22/%E8%BD%AE%E6%92%AD%E5%9B%BE004.jpg",
           title:"学校举办2020年冬季毕业生“青聘果”智能招聘会"
        },
        {
          id:"5",
          titleImg:"https://gxuwz-wnx.oss-cn-beijing.aliyuncs.com/images/10/22/%E8%BD%AE%E6%92%AD%E5%9B%BE005.jpg",
          title:"学校成功举办易校招第二场线下双选会"
        },


      ]

    };
  },

  methods: {


  },


  computed:{
    loginState(){
      if(localStorage.getItem("token")){
        return true;
      }
      else {
        return false;
      }
    }
  },
}


</script>

<style scoped>

/*轮播图标题*/
.swiper-title{
  position: absolute;
  bottom: 10px;
  width: 100%;
  background-color: rgba(0,0,0,.6);
  color: #ffffff;
  height: 70px;
  text-align: center;
  line-height: 70px;
}
/*轮播图标题*/
</style>
